import React from "react";
import "./inter-his.css";
import { useNavigate } from "react-router-dom";

// 定义面试记录的数据类型
interface InterviewRecord {
    id: number;
    user: string;
    score: number;
    comment: string;
    date: string;
}

const HistoryPage: React.FC = () => {
    const navigate = useNavigate();

    // 点击查看详情的处理函数
    const handleDetail = () => {
        // Redirect to the detail page, passing state if necessary
        navigate('/detail', { state: {} });
    };

    // 假设这是从 API 或本地获取的历史数据
    const interviewHistory: InterviewRecord[] = [
        { id: 1, user: "张三", score: 85, comment: "表现不错", date: "2024-11-23" },
        { id: 2, user: "李四", score: 78, comment: "可以提升", date: "2024-11-21" },
        // 如果没有记录，可以注释掉上面数据进行测试
    ];

    return (
        <div className="history-container">
            <h1 className="history-header">面试记录</h1>
            {interviewHistory.length > 0 ? (
                <div className="history-list">
                    {interviewHistory.map((record) => (
                        <div className="history-card" key={record.id}>
                            <p>
                                <strong>用户：</strong>
                                {record.user}
                            </p>
                            <p>
                                <strong>分数：</strong>
                                {record.score} 分
                            </p>
                            <p>
                                <strong>评语：</strong>
                                {record.comment}
                            </p>
                            <p>
                                <strong>时间：</strong>
                                {record.date}
                            </p>
                            <button className="details-btn" onClick={handleDetail}>查看详情</button>
                        </div>
                    ))}
                </div>
            ) : (
                <p className="no-history">暂无面试记录</p>
            )}
        </div>
    );
};

export default HistoryPage;
